<template>
    <a-card title="系统日志" :bordered="false">
        <!-- 搜索-->
        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input v-model="searchForm.model" placeholder="模块" class="width120"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-model="searchForm.event" placeholder="事件" class="width150"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-model="searchForm.operator" placeholder="操作者" class="width120"></a-input>
                </a-form-item>

                <a-form-item>
                    <a-input v-model="searchForm.ip" placeholder="ip" class="width120"></a-input>
                </a-form-item>


                <a-form-item>
                    <a-range-picker @change="rangeDateOnChange"/>
                </a-form-item>
                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>
            </a-form>
        </template>

        <a-table bordered :columns="columns" :rowKey="record => record.id" :dataSource="dataSource"
                 :pagination="pagination" :loading="loading" @change="handleTableChange">
            <!-- 模块插槽 -->
            <template slot="module" slot-scope="text">
                {{ $exMod.findDict(SystemModuleOpt, text) }}
            </template>
            <!--  操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="openModal(record)">详情</a>
            </template>
        </a-table>


        <LogModal v-if="showModal" :showRecord="showRecord"  @callBack="closeModal"/>


    </a-card>
</template>
<script>

    import {pagination, logTable} from '../public/columns';
    import {getLogList} from '../public/http';

    export default {
        components: {
            LogModal: () => import('./LogModal')
        },
        data() {
            return {
                loading: false, //表格loading
                showModal: false,
                showRecord: {},
                dataSource: [],

                pagination: {...pagination}, //复制预设的分页参数
                columns: logTable, //表头管理
                searchForm: {}, //搜索对象
            };
        },
        methods: {
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值

                getLogList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //打开Modal
            openModal(obj) {
                this.showModal = true;
                this.showRecord = obj;
            },

            //2.1 关闭编辑器
            closeModal(e) {
                this.showModal = false;
                this.showRecord = {};
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //事件格式化
            rangeDateOnChange(date, dateString) {
                this.searchForm.beginDate = dateString[0];
                this.searchForm.endDate = dateString[1];
            },

            //数据初始化
            async init() {
                await this.getTableList();
            }


        },
        created() {
            this.init();
        }
    };
</script>
